<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        target屬性,用來指定超鏈接打開的位置
            可選值:
                _self 默認值 在當前頁面中打開超鏈接
                _blank 在一個新的頁面中打開
     -->


     <a href="#p3">到第三個自然段</a>
    
     <a href="#bottom">去底部</a>
     <br><br>
<!-- 
    在開發中可以將#作為超鏈接的路徑的佔位符使用.
 -->
     <a href="#">新的超鏈接</a>
     
     <a href="javascript:;">新的超鏈接</a>
     <!-- 

        可以用javacript:;來作為href的屬性,此時點擊這個超鏈接什麼也不會發生.一
        也可以做一個佔位符使用!
      -->

    <br><br>
    
     <a href="7语义化标签.html" target="_blank">...</a>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ad ab, error, libero magnam enim eum nesciunt velit praesentium quisquam consectetur ducimus aperiam assumenda nobis officia fugit consequuntur? Necessitatibus, veniam!</p>
    
     <!-- 
            可以直接將超鏈接的href屬性設置為#,這樣點擊超鏈接之後
                頁面不會發生跳轉,而是賺到當前頁面的頂部的位置

        id屬性(唯一且不重複的)
            -每一個標籤都添加一個id屬性
            -id屬性就是元素的唯一標識,同一個頁面中不能出現重複的id屬性 
      -->

     <a id="bottom" href="#">回到頂部</a>
    
    
    
    
</body>
</html>